/* eslint-disable react/jsx-handler-names */
import React, { Component } from 'react';
import { AddressC, FormGroup, PrimaryC, SecondHeaderC, DATA_ENTRY } from '@/src/components';
import { Form, Row, Col } from 'antd';

class AddressCTest extends Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.FormGroupRef = React.createRef();

    this.state = {
      loading: true,
      p21: '贵州',
      c21: '贵阳',
      p31: undefined,
      c31: undefined,
      p41: '海南',
      c41: '海口',
      p5: '甘肃',
      c5: '青海',
      p6: undefined,
      c6: undefined,
    };

    setTimeout(() => {
      this.setState({
        p31: '广西',
        c31: '南宁',
        loading: false,
        p6: '上海',
        c6: '上海',
      });
    }, 2000);
  }

  changeAddress = () => {
    this.state.addressc1.setAddress({ province: '江苏', city: '南京' });
  };

  onChange1 = (e) => {
    console.log(e);
    this.setState({
      p11: e.province,
      c11: e.city,
    });
  };

  onChange2 = (e) => {
    this.setState({
      p12: e.province,
    });
  };

  onChange3 = (e) => {
    this.setState({
      p21: e.province,
      c21: e.city,
    });
  };

  onChange4 = (e) => {
    this.setState({
      p31: e.province,
      c31: e.city,
    });
  };

  onChange5 = (e) => {
    this.setState({
      p41: e.province,
      c41: e.city,
    });
  };

  render() {
    return (
      <div style={{ width: '800px' }}>
        <Form ref={this.formRef}>
          <div>
            <SecondHeaderC title='无初始化值' />
            <AddressC form={this.formRef.current} provinceDataIndex={'p11'} cityDataIndex={'c11'} onChange={this.onChange1} />
            <Row gutter={16} justify='center'>
              <Col span={8}>省：{this.state.p11}</Col>
              <Col span={8}>市：{this.state.c11}</Col>
            </Row>
          </div>
          <div>
            <SecondHeaderC title='无初始化值-多选' />
            <AddressC form={this.formRef.current} provinceDataIndex={'p111'} cityDataIndex={'c111'} isMultiple={true} />
          </div>
          <div className='sectionItem'>
            <SecondHeaderC title='同步加载初始化值' />
            <AddressC form={this.formRef.current} provinceDataIndex={'p21'} cityDataIndex={'c21'} provInit={this.state.p21} cityInit={this.state.c21} onChange={this.onChange3} />

            <Row gutter={16} justify='center'>
              <Col span={8}>省：{this.state.p21}</Col>
              <Col span={8}>市：{this.state.c21}</Col>
            </Row>
          </div>
          <div className='sectionItem'>
            <SecondHeaderC title='异步加载初始化值' />
            <AddressC
              form={this.formRef.current}
              provinceDataIndex={'p31'}
              cityDataIndex={'c31'}
              provInit={this.state.p31}
              cityInit={this.state.c31}
              onChange={this.onChange4}
              loading={this.state.loading}
            />
            <Row gutter={16} justify='center'>
              <Col span={8}>省：{this.state.p31}</Col>
              <Col span={8}>市：{this.state.c31}</Col>
            </Row>
          </div>
          <div className='sectionItem'>
            <SecondHeaderC title='点击按钮模拟因业务触发地区的更改' />
            <AddressC
              form={this.formRef.current}
              provinceDataIndex={'p41'}
              cityDataIndex={'c41'}
              provInit={this.state.p41}
              cityInit={this.state.c41}
              onChange={this.onChange5}
              onRef={(ref) => {
                this.setState({ addressc1: ref });
              }}
            />
            <Row gutter={16} justify='center'>
              <Col span={8}>省：{this.state.p41}</Col>
              <Col span={8}>市：{this.state.c41}</Col>
            </Row>
            <PrimaryC style={{ paddingLeft: '20px' }} title='更改地区选项' onClick={this.changeAddress} />
          </div>
          <div>
            <SecondHeaderC title='禁用+回填' />
            <AddressC disabled={true} form={this.formRef.current} provinceDataIndex={'p5'} cityDataIndex={'c5'} provInit={this.state.p5} cityInit={this.state.c5} />
          </div>
        </Form>
        <SecondHeaderC title='formGroup集合组件' />
        <FormGroup
          dataSource={[
            {
              dataIndex: 'PRODUCTLIST',
              type: DATA_ENTRY.ADDRESSC,
              provinceDataIndex: 'p6',
              cityDataIndex: 'c6',
              provInit: this.state.p6,
              cityInit: this.state.c6,
              initialValue: '00465f0f1ad94c5e93c2b6560c08c6c0',
            },
          ]}
          onRef={(ref) => {
            this.FormGroupRef.current = ref;
          }}
        />
        <PrimaryC
          style={{ marginLeft: '20px' }}
          title='获取值'
          onClick={async () => {
            const formValues = await this.FormGroupRef.current.getFormGroupData();
            console.log(formValues);
          }}
        />
        <PrimaryC
          style={{ marginLeft: '20px' }}
          title='重置'
          onClick={() => {
            this.FormGroupRef.current.resetFields();
          }}
        />
      </div>
    );
  }
}

export default AddressCTest;
